<template>
  <span :style="itemStyle" v-if="!trigger || spanValue === emptyValue">{{ spanValue }}</span>
  <span :style="itemStyle" v-else-if="tooltip" class="line_1" @click.stop="itemEvent">
    {{ spanValue }}
  </span>
  <el-button
    v-else-if="parentType === 'table'"
    type="primary"
    :style="itemStyle"
    link
    @click.stop="itemEvent"
    v-bind="attrs"
  >
    {{ spanValue }}
  </el-button>
  <el-popover
    placement="bottom"
    :title="title"
    effect="light"
    :trigger="trigger"
    v-bind="{ ...attrs, ...attrs.popoverConfig }"
    v-else
  >
    <template #reference>
      <span
        :class="`lineOverflow popoverText line_${line}`"
        :style="itemStyle"
        @click.stop="itemEvent"
      >
        {{ spanValue }}
      </span>
    </template>
    <slot>
      <span>{{ spanValue }}</span>
    </slot>
  </el-popover>
</template>

<script setup>
import _ from 'lodash';
import { dateFormat, thousandSeparator } from '@/utils/variables.js';
const attrs = useAttrs();
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: '',
  },

  trigger: {
    // popover 的触发方式, hover、click、focus 或 contextmenu
    type: String,
    default: '',
  },

  title: {
    // popover title
    type: String,
    default: '',
  },

  emptyValue: {
    // 如果数据是空，则显示
    type: String,
    default: '',
  },
  row: {
    // form数据,或者table的行数据
    type: Object,
    default: () => ({}),
  },
  prop: {
    type: String,
    default: '',
  },
  parentType: {
    // 是table引入还是form引入 or other
    type: String,
    default: '',
  },
  options: {
    // 将value 转成label ，下拉选项
    type: Array,
    default: () => [],
  },
  tooltip: {
    type: Boolean,
    default: false,
  },
  line: {
    // 超过多少行之后省略
    type: Number,
  },
});

const itemStyle = computed(() => {
  const { itemStyle } = attrs;
  if (_.isFunction(itemStyle)) {
    return itemStyle(props?.row || {});
  } else {
    return itemStyle || '';
  }
});

const emits = defineEmits(['itemEvent']);

const spanValue = computed(() => {
  let value = props.modelValue;
  const type = attrs.valueType || '';
  // 如果定义了格式化函数，返回格式化内容
  if (type) {
    if (!value && type !== 'fixed') return '';
    if (type === 'date') {
      value = dateFormat(value, !!attrs.withHms);
    } else if (type === 'num') {
      value = thousandSeparator(value, !!attrs.noPostfix);
    } else if (type === 'fixed') {
      // 固定值
      value = attrs.fixedValue;
    }
  } else if (attrs.formatter && _.isFunction(attrs.formatter)) {
    return attrs.formatter(value, props.row, props.options);
  } else if (_.isNil(value) || value === '' || value === 'null') {
    return props.emptyValue;
  }
  return value;
});

function itemEvent() {
  emits('itemEvent', {
    prop: props.prop,
    row: props.row,
  });
}
</script>

<style lang="scss" scoped>
.popoverText {
  cursor: pointer;
}
.lineOverflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
}
.line_1 {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //用省略号显示
  white-space: nowrap; //不换行
  padding: 0 2px;
  box-sizing: border-box;
}

.line_2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
</style>
